<script setup>
import { onMounted, reactive, ref } from 'vue';
import { getSkuInfoListApi } from '@/apis/pms/sku.js'
import categoryCascader from '@/views/common/categoryCascader'
import { Search, Refresh } from '@element-plus/icons-vue'
import brandSelect from '@/views/common/brandSelect';
import { useRouter } from 'vue-router';

const categoryPath = ref([])
const params = reactive({
  skuTitle: '',
  categoryId: '',
  brandId: '',
  priceMax: '',
  priceMin: '',
  pageNum: 1,
  pageSize: 10,
})

const loading = ref(false)

const skuData = ref({})
const getSkuInfoList = async () => {
  loading.value = true
  const res = await getSkuInfoListApi(params);
  skuData.value = res.data;
  loading.value = false
}

// 条件查询
const handleQuery = () => {
  if(params.priceMax < params.priceMin){
    ElMessage({
        message: '最小价格不能大于最大价格',
        type: 'warning',
      })
      return;
  }
  params.categoryId = categoryPath.value[categoryPath.value.length - 1];
  getSkuInfoList();
}

// 重置
const handleRefresh = () => {
  params.skuTitle = '';
  params.categoryId = '';
  params.brandId = '';
  params.priceMax = '';
  params.priceMin = '';
  params.pageNum = 1;
  params.pageSize = 10;
  categoryPath.value = [];
  getSkuInfoList();
}

// 分页
const getSkuListPage = (currentIndex) => {
  params.pageNum = currentIndex;
  getSpuInfoList();
}

const router = useRouter()
const handleCommand = (row, command) => {
  if(command === "skuInventory"){
    router.push({ path: '/productWare/inventory', query: { skuId: row.skuId } })
  }
}

onMounted(() => getSkuInfoList())
</script>

<template>
  <div class="container" v-loading="loading">
    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <span style="display: inline-block;width: 70px;">Sku标题</span>
        <el-input v-model="params.skuTitle" placeholder="请输入sku标题" clearable style="width: 240px;" />
        <span style="display: inline-block;width: 55px;margin-left: 10px;">分类名</span>
        <categoryCascader v-model:categoryPath="categoryPath" style="width: 220px;"></categoryCascader>
        <span style="display: inline-block;width: 55px;margin-left: 10px;">品牌名</span>
        <brandSelect v-model:brandId="params.brandId" v-model:categoryId="categoryPath[categoryPath.length - 1]"
          style="width: 220px;"></brandSelect>
        <span style="display: inline-block;width: 45px;margin-left: 10px;">价格</span>
        <el-input-number v-model="params.priceMin" :precision="2" :step="1" style="width: 200px;" /><span
          style="margin:0 2px;">-</span>
        <el-input-number v-model="params.priceMax" :precision="2" :step="1" style="width: 200px;" />
        <el-button type="primary" :icon="Search" style="margin-left: 10px;" @click="handleQuery">搜索</el-button>
        <el-button @click="handleRefresh" :icon="Refresh">重置</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table :data="skuData.list" border style="width: 100%">
          <el-table-column prop="skuTitle" label="Sku标题" align="center" />
          <el-table-column prop="skuDefaultImg" label="默认图片" width="150" align="center">
            <template v-slot="scope">
              <div style="height: 75px;"><img :src="scope.row.skuDefaultImg" style="height: 100%;"></div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格" align="center" />
          <el-table-column prop="saleCount" label="销量" align="center" />
          <el-table-column prop="createTime" label="创建时间" width="250" align="center" />
          <el-table-column label="操作" width="250" align="center">
            <template v-slot="scope">
              <div style="display:flex;justify-content:center;align-items:center;">
                <!-- <el-button type="primary" text @click="handleCreate">采购</el-button> -->
                <el-dropdown @command="handleCommand(scope.row, $event)" size="small" type="text">
                  <span class="el-dropdown-link" style="color:#409EFF;">更多</span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="skuInventory">库存管理</el-dropdown-item>
                      <!-- <el-dropdown-item>Action 2</el-dropdown-item>
                      <el-dropdown-item>Action 3</el-dropdown-item> -->
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <div class="pageination">
      <el-pagination v-model:current-change="skuData.pageNum" :page-size="skuData.pageSize" background
        layout="prev, pager, next" :page-count="skuData.pages" @current-change="getSkuListPage" />
    </div>

  </div>
</template>

<style scoped lang='scss'>
// 解决出现黑框
.el-dropdown-link:focus {
  outline: none;
}
</style>